<template>
  <el-menu @open="openConnection" ref="menu" :style="'background-color:'+this.connection.backgroundColor">
        <el-submenu index="1">
            <!-- 连接头部 -->
            <menuHeader slot="title" :title="connection.name" :config="this.connection" ref="menuHeader"></menuHeader>
            <!-- 连接操作主体 -->
            <menuOperating :redisClient="clientObject" :config="this.connection" ref="menuOperating"></menuOperating>
            <!-- 连接key列表 -->
            <menuKeyList  :redisClient="clientObject" :config="this.connection" ref="menuKeyList"></menuKeyList>
        </el-submenu>
    </el-menu>
</template>

<script>
import menuHeader from '@/components/aside/menuHeader'
import menuOperating from '@/components/aside/menuOperating'
import menuKeyList from '@/components/aside/menuKeyList'
import redisClient from '@/util/redis/redisClient'
export default {
    props:["connection"],
    components:{
        menuHeader,menuOperating,menuKeyList
    },
    data(){
        return {
            clientObject:null,
        }
    },
    methods:{
        //打开链接
        openConnection(){
            if(!this.clientObject){
                const client=redisClient.createConnection(this.connection);
                if(client.status!='ready'){
                    client.on('ready',()=>{
                        this.clientObject=client
                        this.$refs.menuHeader.disableRefresh=false
                        const tabName=this.connection.name
                        this.$eventBus.$emit('addTab',{"target":"new","redisClient":client,"tabName":tabName,"type":"server"})
                    })
                }
            }
        }
    }
}
</script>

<style scoped>
    .el-menu{
        border-right: none;
    }
    .el-submenu >>> [class^=el-icon-] {
        margin-right: 0px;
        width: auto;
        text-align: center;
        font-size: 12px;
    }
</style>